<template>
	<view class="content borrow">
		<topBar title='修改个人信息'/>
		<form>
		<view class="cu-form-group margin-top">
			<view class="title">头像</view>
			<view class="cu-avatar radius bg-gray">
				<image :src="imgUrl" mode="aspectFill" style="width: 70upx;height: 70upx;"></image>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">手机号码</view>
			<input v-if="userInfo.phone != null" disabled="disabled" placeholder="请输入手机号" v-model="userInfo.phone" name="input"></input>
			<input v-else disabled="disabled" placeholder="还未绑定" name="input"></input>
			<view class="cu-capsule radius" v-if="userInfo.phone != null">
				<button class="cu-btn bg-orange shadow margin-left" @tap="showModal" data-target="DialogModal2">换绑</button>
			</view>
			<view class="cu-capsule radius" v-else>
				<button class="cu-btn bg-blue shadow margin-left" @tap="showModal" data-target="DialogModal2">绑定</button>
			</view>
		</view>
		
		
		<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">Modal标题</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					Modal 内容。
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green " @tap="hideModal">
						<text class="cuIcon-moneybag"></text>微信支付</view>
					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">确定</view>
				</view>
			</view>
		</view>
		
		<view class="cu-form-group">
			<view class="title">性别</view>
			<picker @change="PickerChange" :value="index" :range="picker">
				<view class="picker">
					{{index>-1?picker[index]:userInfo.gender}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">年龄</view>
			<input placeholder="请输入年龄" v-model="userInfo.age" name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">公司</view>
			<input placeholder="请输入公司" v-model="userInfo.company" name="input"></input>
			<text class='cuIcon-locationfill text-orange'></text>
		</view>
		<view class="cu-form-group">
			<view class="title">生日</view>
			<picker mode="date" :value="date" start="1960-01-01" end="2010-12-31" @change="DateChange">
				<view class="picker">
					{{date}}
				</view>
			</picker>
		</view>
		
		
		<view class="cu-form-group">
			<view class="title">地址</view>
			<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
				<view class="picker">
					<!-- {{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}} -->
					{{areaList[0]}}/{{areaList[1]}}/{{areaList[2]}}
				</view>
			</picker>
		</view>
		</form>
		<view class="btn-row">
		    <button type="primary" class="primary" @tap="updMyself">修改基本信息</button>
		</view>
	</view>
</template>

<script>
	import topBar from '../../components/TopBar.vue'
	import ListItem from '../../components/ListItem.vue'
	import ButtonItems from '../../components/ButtonItems.vue'
	import selectItems from '../../components/selectItems.vue'
	
	export default {
		data() {
			return {
				userInfo: {},
				imgUrl: '',
				modalName: null,
				date: "",
				multiArray: [
					['湖北省', '湖南省'],
					['武汉市', '孝感市', '咸宁市', '洪湖市', '黄石市','天门市'],
					['黄陂区', '江夏区', '新洲区', '武昌区', '汉口区', '汉阳区' , '蔡甸区']
				],
				objectMultiArray: [
					[{
							id: 0,
							name: '湖北省'
						},
						{
							id: 1,
							name: '湖南省'
						}
					],
					[{
							id: 0,
							name: '武汉市'
						},
						{
							id: 1,
							name: '孝感市'
						},
						{
							id: 2,
							name: '咸宁市'
						},
						{
							id: 3,
							name: '洪湖市'
						},
						{
							id: 3,
							name: '黄石市'
						},
						{
							id: 4,
							name: '天门市'
						}
					],
					[{
							id: 0,
							name: '黄陂区'
						},
						{
							id: 1,
							name: '江夏区'
						},
						{
							id: 2,
							name: '新洲区'
						},
						{
							id: 3,
							name: '武昌区'
						},
						{
							id: 4,
							name: '汉口区'
						},
						{
							id: 5,
							name: '汉阳区'
						},
						{
							id: 6,
							name: '蔡甸区'
						}
					]
				],
				multiIndex: [0, 0, 0],
				areaList: [],
				index: -1,
				picker: ['保密', '男', '女']
			}
		},
		components: {
			topBar
		},
		onShow() {
			this.getUserInfo()
		},
		methods:{
			//模态框
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			DateChange(e) {
				this.date = e.detail.value
				this.userInfo.birth = e.detail.value
			},
			PickerChange(e) {
				this.index = e.detail.value
				this.userInfo.gender=this.picker[this.index]
			},
			MultiChange(e) {
				this.multiIndex = e.detail.value
			},
			getUserInfo: function(){
				this.request({
					url: `user/getUserInfo`,
					method: "get",
				}).then(res => {
					// alert(JSON.stringify(res.data.result.birth))
					this.userInfo = res.data.result
					if(!res.data.result.birth == ""){
						this.date=res.data.result.birth.substring(0,10)
					}
					this.areaList[0] = res.data.result.province
					this.areaList[1] = res.data.result.city
					this.areaList[2] = res.data.result.area
					this.imgUrl = "../../static/img/"+res.data.result.avatar
					// uni.setStorage({key:'userInfo',data: res.data.result})
				}).catch(err => {
					// alert(JSON.stringify(err))
					uni.showToast({
			            icon: 'none',
			            title: err.data.msg
			        });
				})
			},
			updMyself(){
				// alert(this.multiArray[0][this.multiIndex[0]]+"/"+this.multiArray[1][this.multiIndex[1]]+"/"+this.multiArray[2][this.multiIndex[2]])
				// alert(this.areaList)
				this.request({
					url: `user/updateMyself`,
					params: this.userInfo,
					method: "POST"
				}).then(res => {
					// alert(JSON.stringify(res.data.result))
					// uni.setStorage({key:'userInfo',data: res.data.result})
					// alert(JSON.stringify(res))
					if(res.data.msg == "修改成功"){
						uni.showToast({
						    icon: 'none',
						    title: "修改成功"
						});
					}else if(res.data.msg == "修改失败"){
						uni.showToast({
						    icon: 'none',
						    title: "修改失败"
						});
					}else{
						uni.showToast({
						    icon: 'none',
						    title: "系统错误，稍后重试"
						});
					}
				}).catch(err => {
					uni.showToast({
				        icon: 'none',
				        title: "系统错误，稍后重试"
				    });
				})
			},
			MultiColumnChange(e) {
				let data = {
					multiArray: this.multiArray,
					multiIndex: this.multiIndex
				};
				data.multiIndex[e.detail.column] = e.detail.value;
				switch (e.detail.column) {
					case 0:
						switch (data.multiIndex[0]) {
							case 0:
								data.multiArray[1] = ['武汉市', '孝感市', '咸宁市', '洪湖市', '黄石市','天门市'];
								data.multiArray[2] = ['黄陂区', '江夏区', '新洲区', '武昌区', '汉口区', '汉阳区' , '蔡甸区'];
								break;
							case 1:
								data.multiArray[1] = ['长沙市', '湘潭市', '岳阳市', '常德市', '张家界'];
								data.multiArray[2] = ['天心区', '芙蓉区', '开福区', '雨花区'];
								break;
						}
						data.multiIndex[1] = 0;
						data.multiIndex[2] = 0;
						break;
					case 1:
						switch (data.multiIndex[0]) {
							case 0:
								switch (data.multiIndex[1]) {
									case 0:
										data.multiArray[2] = ['黄陂区', '江夏区', '新洲区', '武昌区', '汉口区', '汉阳区' , '蔡甸区'];
										break;
									case 1:
										data.multiArray[2] = ['孝南区'];
										break;
									case 2:
										data.multiArray[2] = ['咸安区'];
										break;
									case 3:
										data.multiArray[2] = ['乌林镇', '龙口镇', '燕窝镇', '新滩镇'];
										break;
									case 4:
										data.multiArray[2] = ['黄石港', '西塞山', '下陆区', '铁山区'];
										break;
									case 5:
										data.multiArray[2] = ['暂无'];
										break;
								}
								break;
							case 1:
								switch (data.multiIndex[1]) {
									case 0:
										data.multiArray[2] = ['天心区', '芙蓉区', '开福区', '雨花区'];
										break;
									case 1:
										data.multiArray[2] = ['雨湖区', '岳塘区'];
										break;
									case 2:
										data.multiArray[2] = ['岳阳楼', '云溪区', '君山区'];
										break;
									case 3:
										data.multiArray[2] = ['武陵区', '鼎城区'];
										break;
									case 4:
										data.multiArray[2] = ['永定区', '武陵源区'];
										break;
								}
								break;
						}
						data.multiIndex[2] = 0;
						break;
				}
				this.multiArray = data.multiArray;
				this.multiIndex = data.multiIndex;
				this.areaList[0] = this.multiArray[0][this.multiIndex[0]]
				this.areaList[1] = this.multiArray[1][this.multiIndex[1]]
				this.areaList[2] = this.multiArray[2][this.multiIndex[2]]
				this.userInfo.province = this.multiArray[0][this.multiIndex[0]]
				this.userInfo.city = this.multiArray[1][this.multiIndex[1]]
				this.userInfo.area = this.multiArray[2][this.multiIndex[2]]
			}
		}
	}
	
</script>
<style>
	@import "/colorui/main.css";
	@import "/colorui/icon.css";
</style>
<style lang="scss" scoped>
	.borrow {
		.banner {
			width: 723upx;
			height: 164upx;
			margin-top: 20upx;
			margin-left: 50%;
			transform: translateX(-50%);
		}
	
		.title {
			text-align: center;
			font-size: 28upx;
			line-height: 2;
			margin-bottom: 40upx;
		}
	
		.price {
			text-align: center;
			font-size: 64upx;
			margin-bottom: 40upx;
			color: $uni-color-primary;
		}
	
		.lineNum {
			color: $uni-text-color-grey;
			display: flex;
			justify-content: space-between;
		}
	
		.but {
			padding: 80upx;
		}
	
		.labTitle {
			margin-top: 30upx;
			font-size: 24upx;
			margin: 5px 20px 0px 20px;
			color: $uni-text-color-grey;
		}
	
		.redioCk {
			position: relative;
			top: -4upx;
			transform: scale(0.6);
		}
	
		.clmargin {
			padding: 0 30upx;
		}
	}
	
	.progBox {
		padding: 10upx 0upx;
	}
	
	.progressBar {
		position: relative;
		background: rgba(79, 87, 235, 0.5);
		height: 4upx;
		width: 100%;
	}
	
	.progress {
		position: absolute;
		content: '';
		left: 0upx;
		height: 4upx;
		width: 0;
		background: #4f57eb;
		// transition: 1ms;
	}
	
	.progress::before {
		position: absolute;
		content: '';
		top: -1px;
		right: 0upx;
		height: 8upx;
		width: 8upx;
		border-radius: 100%;
		background: #4f57eb;
	}
	
	.pos::before {
		position: absolute;
		content: '';
		top: -30upx;
		right: -30upx;
		height: 60upx;
		width: 60upx;
		border-radius: 100%;
		background: #4f57eb;
	}
</style>
